<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CMS供应商后台数据统计</title>
    {Common::css("supplier_sub.css,supplier_back.css,pannel_style.css,v1/admin.css")}
    {Common::css("layer.css")}
    {Common::js("jquery.min.js,v1/echarts/echarts.min.js")}
    {Common::js("layer/layer.js,laypage/laypage.js,v1/laytpl.js")}
</head>
<body style="margin: 0">
<div class="supplier-main-container" style="height: 1200px">
    <div class="supplier-main-block select-condition">
        <div class="pannel-charts-container">
            <select class="select" id="year">
                {loop $filter_criteria['year'] $y}
                <option value="{$y}" {if $y==$params['year']}selected="selected"{/if}>{$y}年</option>
                {/loop}
            </select>
            <select class="select" id="channel">
                <option value="0">全部渠道</option>
                {loop $channel_list $c}
                <option value="{$c['id']}" {if $c['id']==$params['channel_id']}selected="selected"{/if}>{$c['title']}</option>
                {/loop}
            </select>
            <select class="select" id="month">
                <option value="0">全部月份</option>
                {loop $filter_criteria['month'] $m}
                <option value="{$m}" {if $m==$params['month']}selected="selected"{/if}>{$m}月</option>
                {/loop}
            </select>
            {if $filter_criteria['type']}
            <select class="select" id="type_id">
                <option value="0">全部类型</option>
                {loop $filter_criteria['type'] $t}
                <option value="{$t['id']}" {if $t['id']==$params['type_id']}selected="selected"{/if}>{$t['modulename']}</option>
                {/loop}
            </select>
            <select class="select" id="number" {if $params['number']!=1}style="display: none"{/if}>
                <option value="0" {if $params['number']!=1}selected="selected"{/if}>全部产品</option>
                <option value="1" {if $params['number']==1}selected="selected"{/if}>单个产品</option>
            </select>
            {/if}
            <input class="product-btn" type="button" value="选择产品" {if $params['number']!=1}style="display: none"{/if}>
            <span class="select-product">
                {if $product}
                <span data-id="{$product['id']}">{$product['title']}<i class="icon-delete" onclick="$(this).parent().remove();"></i></span>
                {/if}
            </span>
            <input class="search-btn" type="button" value="搜索">
        </div>
    </div>
    <div class="supplier-main-block">
        <div class="pannel-charts-container">
            <div class="pannel-charts-title">销量统计</div>
            <div class="sales-charts-block">
                <div class="sales-volume-block" id="mychartA"></div>
            </div>
        </div>
        <!-- 销量统计 -->

        <div class="pannel-charts-container">
            <div class="pannel-charts-title">销售额统计</div>
            <div class="sales-charts-block">
                <div class="sales-amount-block" id="mychartB"></div>
            </div>
        </div>
        <!-- 销售额统计 -->

        <div class="pannel-charts-container" style="height: 520px">
            <div class="pannel-charts-title">渠道销量统计</div>
            <div class="sales-charts-block clearfix">
                <div class="channel-volume-block" id="mychartC"></div>
                <div class="channel-amount-block" id="mychartD"></div>
            </div>
        </div>
        <!-- 渠道销量统计 -->
    </div>
</div>
<div class="hide pd-20" id="spotSelectBox" style="display: none">
    <div class="clearfix">
        产品名称：
        <input id="keyword" type="text" class="input-text w200 ml-5" placeholder="请输入产品名称">
        <a href="javascript:;" id="search-pro-key" class="btn btn-default ml-5">搜索</a>
    </div>
    <table class="table table-border table-bordered table-bg table-data mt-10" padding_strong=hiXX4t >
        <thead>
            <tr>
                <th style="border: 1px #14cc5c solid;" width="10%">选择</th>
                <th style="border: 1px #14cc5c solid; width="20%">ID</th>
                <th style="border: 1px #14cc5c solid; width="70%">名称</th>
            </tr>
        </thead>
        <script id="tpl-item" type="text/html">
            <%# for(var i=0;i<d.length;i++){%>
            <tr class="text-c">
                <td>
                    <input type="radio" id="checkbox-00" name="product" data-json='{"id":<% d[i].id %>,"name":"<% d[i].title %>"}'>
                </td>
                <td><% d[i].id %></td>
                <td><% d[i].title %></td>
            </tr>
            <%# } %>
        </script>
        <tbody id="tpl-show"></tbody>
    </table>
    <div class="mt-10 clearfix">
        <div class="return-page f-r">
            <div class="f-r" id="layerReturnPage"></div>
        </div>
    </div>
    <!-- 翻页 -->
</div>
<!-- 选择产品 -->
<script>
    $(function(){
        $("#type_id").change(function(){
            var type_id = $(this).val();
            var number = $("#number").val();
            if(type_id>0){
                $('#number').show();
                if(number>0){
                    $('.product-btn').show();
                }else{
                    $('.product-btn').hide();
                    $('.select-product').html('');
                }
            }else{
                $('#number').hide();
                $('.product-btn').hide();
                $('.select-product').html('');
            }
        });
        $('#number').change(function(){
            var type_id = $("#type_id").val();
            var number = $(this).val();
            if(number==1 && type_id>0){
                $('.product-btn').show();
            }else{
                $('.select-product').html('');
                $('.product-btn').hide();
            }
        });
        $('.search-btn').click(function(){
            var year = $('#year').val();
            var month = $('#month').val();
            var type_id = $('#type_id').val();
            var number = $('#number').val();
            var channel_id = $('#channel').val();
            var product_id = $('.select-product span').attr('data-id');
            var link = '/supplier/pc/index/data_report?year='+year;
            link += month?'&month='+month:'';
            link += type_id?'&type_id='+type_id:'';
            link += number?'&number='+number:'';
            link += product_id?'&product_id='+product_id:'';
            link += channel_id?'&channel_id='+channel_id:'';
            window.location.href = link;
        });
        $('.product-btn').on('click', function () {
            layer.open({
                type: 1,
                title: '选择产品',
                area: ['800px', '670px'],
                btn: ['确定', '取消'],
                content: $('#spotSelectBox'),
                success:function (layero, index) {
                    var pro_type = $('#type_id').val();
                    var pro_url  = '/supplier/pc/index/product_list';
                    searchItem(pro_url,pro_type,layero);
                    $(layero).find('#search-pro-key').unbind('click');
                    $(layero).find('#search-pro-key').on('click',function () {
                        var pro_type = $('#choose-pro-type').val();
                        searchItem(pro_url,pro_type,layero)
                    });
                },
                yes:function (index, layero) {
                    var obj = $(layero).find('input:radio:checked').data('json');
                    if(obj)
                    {
                        var set_obj = $('.select-product');
                        set_obj.html('');
                        var pro_info = ' <span data-id="'+obj.id+'">'+obj.name.substring(0,20)+'<i class="icon-delete" onclick="$(this).parent().remove();"></i></span>';
                        set_obj.html(pro_info);
                        layer.closeAll();
                    }else{
                        layer.msg('请选择一个产品!');
                    }
                }
            })
        });
    })

    function searchItem(pro_url,pro_type,layero) {
        var keyword = $(layero).find('#keyword').val();
        $.get(pro_url,{type:pro_type,page:1,keyword:keyword},function (rsdata) {
            if(rsdata.status)
            {
                var tpldata = rsdata.data;
                var getTpl = $('#tpl-item').html();
                laytpl(getTpl).render(tpldata, function(html){
                    $('#tpl-show').html(html);
                    //分页
                    laypage({
                        cont: $('#layerReturnPage'),
                        pages: rsdata.page_nums,
                        skin: '#14cc5c',
                        groups: 5,
                        first: '首页',
                        last: '尾页',
                        jump: function(obj, first){
                            if(!first) {
                                var page = obj.curr;
                                var pro_type = $('#type_id').val();
                                var keyword = $(layero).find('#keyword').val();
                                $.get(pro_url, {
                                    type: pro_type,
                                    page: page,
                                    keyword: keyword
                                }, function (rs_data) {
                                    console.log(rs_data);
                                    var tpldata = rs_data.data;
                                    var getTpl = $('#tpl-item').html();
                                    laytpl(getTpl).render(tpldata, function (html) {
                                        $(layero).find('#tpl-show').html(html);
                                    });
                                },'json');
                            }
                        }
                    });
                });
            }
        },'json');
    }
</script>
<script>
    $(function(){
        var consume_num   = '{$data_statistics["consume_num"]}';
        var payment_num   = '{$data_statistics["payment_num"]}';
        var settle_profit = '{$data_statistics["settle_profit"]}';
        var total_profit  = '{$data_statistics["total_profit"]}';
        var x_data        = '{$data_statistics["x_data"]}';
        consume_num   = JSON.parse(consume_num);
        payment_num   = JSON.parse(payment_num);
        settle_profit = JSON.parse(settle_profit);
        total_profit  = JSON.parse(total_profit);
        x_data = JSON.parse(x_data);

        var channel   = '{$channel_statistics["channel"]}';
        var sales_num = '{$channel_statistics["sales_num"]}';
        var price     = '{$channel_statistics["price"]}';
        channel   = JSON.parse(channel);
        sales_num = JSON.parse(sales_num);
        price     = JSON.parse(price);
        console.log(channel[0]);

        //销量统计
        var chartDomA = document.getElementById('mychartA');
        var myChartA = echarts.init(chartDomA);
        var optionA = {
            title: {
                show: false,
                text: '销量统计',
                x: 25,
                y: 25
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var relVal = params[0].name;
                    for (var i = 0, l = params.length; i < l; i++) {
                        relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "个";
                    }
                    return relVal;
                },
                padding: [5, 15],
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'Arial'
                },
                backgroundColor: 'rgba(0,13,94,.6)'
            },
            legend: {
                show: true,
                right: 20,
                top: 15,
                itemGap: 40,
                itemWidth: 10,
                itemHeight: 10,
                data: [
                    {
                        name: '消费数量',
                        icon: 'circle'
                    },
                    {
                        name: '支付数量',
                        icon: 'circle'
                    }
                ]
            },
            grid: {
                top: 50,
                left: 80,
                right: 50,
                bottom: 40,
                borderWidth: 1,
                borderColor: '#e6e6e6'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: x_data,
                    axisLine: {    // 轴线
                        show: true,
                        lineStyle: {
                            color: '#e5e5e5',
                            type: 'solid',
                            width: 1
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#e5e5e5'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f3f3',
                            type: 'solid',
                            width: 1
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['#fafafa', '#fff']
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '/个',
                    nameTextStyle: {
                        color: '#666'
                    },
                    axisLine: {    // 轴线
                        show: true,
                        lineStyle: {
                            color: '#e5e5e5',
                            type: 'solid',
                            width: 1
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f3f3',
                            type: 'solid',
                            width: 1
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    name: '消费数量',
                    smooth: true,
                    symbolSize: 8,
                    data: consume_num,
                    itemStyle: {
                        normal: {
                            color: '#3dd0bd',
                            borderColor: '#3dd0bd'
                        },
                        emphasis: {
                            color: '#3dd0bd',
                            borderWidth: 3,
                            borderColor: '#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#3dd0bd'
                        }
                    }
                },{
                    type: 'line',
                    name: '支付数量',
                    smooth: true,
                    symbolSize: 8,
                    data: payment_num,
                    itemStyle: {
                        normal: {
                            color: '#56a3f1',
                            borderColor: '#56a3f1'
                        },
                        emphasis: {
                            color: '#56a3f1',
                            borderWidth: 3,
                            borderColor: '#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#56a3f1'
                        }
                    }
                }
            ]
        };
        optionA && myChartA.setOption(optionA);
        //销售额统计
        var chartDomB = document.getElementById('mychartB');
        var myChartB = echarts.init(chartDomB);
        var optionB = {
            title: {
                show: false,
                text: '销售额统计',
                x: 25,
                y: 25
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var relVal = params[0].name;
                    for (var i = 0, l = params.length; i < l; i++) {
                        relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "元";
                    }
                    return relVal;
                },
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'Arial'
                },
                padding: [5, 15],
                backgroundColor: 'rgba(0,13,94,.6)'
            },
            legend: {
                sshow: true,
                right: 20,
                top: 15,
                itemGap: 40,
                itemWidth: 10,
                itemHeight: 10,
                data: [
                    {
                        name: '已结算收益',
                        icon: 'circle'
                    },
                    {
                        name: '订单收益总额',
                        icon: 'circle'
                    }
                ]
            },
            grid: {
                top: 50,
                left: 80,
                right: 50,
                bottom: 40,
                borderWidth: 1,
                borderColor: '#e6e6e6'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: x_data,
                    axisLine: {    // 轴线
                        show: true,
                        lineStyle: {
                            color: '#e5e5e5',
                            type: 'solid',
                            width: 1
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#e5e5e5'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f3f3',
                            type: 'solid',
                            width: 1
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['#fafafa', '#fff']
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '/元',
                    nameTextStyle: {
                        color: '#666'
                    },
                    axisLine: {    // 轴线
                        show: true,
                        lineStyle: {
                            color: '#e5e5e5',
                            type: 'solid',
                            width: 1
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f3f3',
                            type: 'solid',
                            width: 1
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    name: '已结算收益',
                    smooth: true,
                    symbolSize: 8,
                    data: settle_profit,
                    itemStyle: {
                        normal: {
                            color: '#3dd0bd',
                            borderColor: '#3dd0bd'
                        },
                        emphasis: {
                            color: '#3dd0bd',
                            borderWidth: 3,
                            borderColor: '#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#3dd0bd'
                        }
                    }
                },{
                    type: 'line',
                    name: '订单收益总额',
                    smooth: true,
                    symbolSize: 8,
                    data: total_profit,
                    itemStyle: {
                        normal: {
                            color: '#56a3f1',
                            borderColor: '#56a3f1'
                        },
                        emphasis: {
                            color: '#56a3f1',
                            borderWidth: 3,
                            borderColor: '#fff'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#56a3f1'
                        }
                    }
                }
            ]
        };
        optionB && myChartB.setOption(optionB);

        //渠道销量
        var chartDomC = document.getElementById('mychartC');
        var myChartC = echarts.init(chartDomC);
        var optionC = {
            title: {
                show: true,
                text: '渠道销量',
                x: 'center',
                y: 25
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}：{c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                bottom: 15,
                itemGap: 20,
                itemWidth: 10,
                itemHeight: 10,
                data: channel
            },
            series: [
                {
                    name: '渠道销量（个）',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#975fe4', '#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    data: sales_num
                }
            ]
        };
        optionC && myChartC.setOption(optionC);

        //渠道销售金额
        var chartDomD = document.getElementById('mychartD');
        var myChartD = echarts.init(chartDomD);
        var optionD = {
            title: {
                show: true,
                text: '渠道销售金额',
                x: 'center',
                y: 25
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}：{c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                bottom: 15,
                itemGap: 20,
                itemWidth: 10,
                itemHeight: 10,
                data: channel
            },
            series: [
                {
                    name: '渠道销售额（元）',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#975fe4', '#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    data: price
                }
            ]
        };
        optionD && myChartD.setOption(optionD);
        $(window).on("resize", function () {
            myChartA.resize();
            myChartB.resize();
            myChartC.resize();
            myChartD.resize();
        });

    });
</script>
</body>
</html>
